<template>
  <div class="mainBoxOfPay">
     
      
     <!-- <el-dialog
        title="微信支付"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="500px">
            <div id="qrcode" ref="qrcode"  style="display:flex;align-items: center;justify-content: center;"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>   -->
  </div>
</template>

<script>
import QRCode from 'qrcode2';
import imgs from "@/assets/images/phone-bg.png"
export default {
    data () {
        return {
            text:"",
            img:imgs,
            dialogVisible:false
        }
    },
    methods:{
        handleClose(done) {
            this.$confirm('确认关闭当前页面吗？')
            .then(_ => {
                this.close();
            })
            .catch(_ => {});
        },
        close(){
            window.close();
        },
        aa(){
            var qrcodes = new QRCode(document.getElementById("qrcode"), {
                text: this.erweima
              })
        },
         aliPay(val){
            this.$ajax.get("/alipay/qrCode",{
                params:{
                    taskId:val
                }
            },{headers: {'Content-Type': 'text/html;charset=UTF-8'}})
            .then(res =>{
               const div = document.createElement('div')
                div.innerHTML = res.data //此处form就是后台返回接收到的数据
                document.body.appendChild(div)
                document.forms[0].submit();
            })
        },
        wxPay(val){
            this.$ajax.get("/wxpay/qrCode",{
                params:{
                    taskId:val
                }
            })
            .then(res =>{
                this.erweima = res.data.data;
                this.dialogVisible = true;
                this.$nextTick(()=>{
                    this.aa();
                })
            })
        },
    },
    created(){
        if(this.$route.query.payType == 'zfb'){
            this.aliPay(this.$route.query.id)
        }else{
            this.wxPay(this.$route.query.id)
        }
        
    }
}
</script>

<style lang="scss" >
.mainBoxOfPay{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payMain{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .el-col-6{
        
    }
    .l{
        padding: 10px;
            border: 1px solid #ddd;
            img{
            width: 100%;
            display: block;
        }
    }
    .c{
        display: flex;
        align-items: center;
        margin: 0 20px;
        i{
            font-size: 40px;
        }
        dl{
            font-size: 18px;
            line-height: 24px;
        }
    }
}
@media  (max-width: 750px){
    .mainBoxOfPay{
        align-items: flex-start;
        .c{
            justify-content: center;
        }
        .r{
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>